<template>
  <div class="page">
    <!-- 表单 -->
    <a-card>
      <ComVxeTable
        :columns="columns"
        :axios="page"
        :fromItem="fromItem"
        :formData="formData"
        :initialize="initialize"
        @check-view="checkView"
        ref="xTable"
      >
        <template #button>
          <vxe-button
            type="submit"
            status="primary"
            content="添加"
            @click="handlerAdd"
          ></vxe-button>
          <vxe-button
            :title="'扫码添加'"
            size="small"
            status="primary"
            :content="'扫码添加'"
            @click="handlerSmForm(data.row)"
          ></vxe-button>
        </template>
        <template #operate="data">
          <vxe-button
            title="编辑"
            status="primary"
            size="small"
            content="编辑"
            @click="handlerEdit(data.row)"
          ></vxe-button>
          <vxe-button
            :title="'删除'"
            status="danger"
            :content="'删除'"
            size="small"
            @click="handlerDelete(data.row)"
          ></vxe-button>
          <!-- <vxe-button
            title="移动端表单"
            status="primary"
            content="移动端表单"
            @click="handlerAppForm(data.row)"
          ></vxe-button> -->
        </template>
      </ComVxeTable>
    </a-card>
    <vxe-modal
      v-model="vxModalAdd.visabled"
      :width="vxModalAdd.width"
      :height="vxModalAdd.height"
      :title="vxModalAdd.title"
      :destroy-on-close="true"
      show-footer
      @close="addClear"
    >
      <template #default>
        <slot name="addmodal">
          <recommend-form-app
            :form="model"
            style="width: 960px; margin: 0 auto"
            @change="handlerAppFormChange"
            :falg="flag"
            :refresh="handlerEdit"
          ></recommend-form-app>
          <!-- <everday-form
            :formItem="formItem"
            :beforeCreate="beforeCreateForm"
            :labelcol="{ span: 8 }"
          >
          </everday-form> -->
        </slot>
      </template>

      <template #footer>
        <div>
          <slot name="footer">
            <vxe-button
              type="submit"
              status="primary"
              content="提交"
              @click="addOk"
            ></vxe-button>

            <vxe-button
              type="submit"
              status="primary"
              content="取消"
              @click="addClear"
            ></vxe-button>
          </slot>
        </div>
      </template>
    </vxe-modal>
    <vxe-modal
      v-model="appmodel"
      width="50vw"
      height="60vh"
      title="添加推荐信息"
    >
      <template #default>
        <div style="text-align: center;">
          <img  width="300px" :src="appSrc" />
        </div>
      </template>
    </vxe-modal>
  </div>
</template>

<script>
// 审评员推荐
import {
  queryPageList,
  addHcyTj,
  spcyRsHcytjjQueryById,
  spcyRsHcytjjlDeleteBatch,
  spcyRsHcytjjlEdit,
} from "../api/recommend";
import ComVxeTable from "@/views/everydayCheck/components/vxe-table/com-vxe-table.vue";
import EverdayForm from "../components/everday-form.vue";
import { qrcanvas } from "qrcanvas";
import RecommendFormApp from "./RecommendFormApp.vue";
export default {
  props: ["type"],
  components: { ComVxeTable, EverdayForm, RecommendFormApp },
  name: "recommend",

  data() {
    const formItem = [
      {
        type: "input",
        label: "年度",
        model: "fyear",
        span: 8,
        labelCol: { span: 8 },
        rules: [
          {
            required: true,
            message: "请选择输入年度",
          },
        ],
      },
      {
        type: "input",
        label: "姓名",
        model: "fbusmc",
        span: 8,
        labelCol: { span: 8 },
        rules: [
          {
            required: true,
            message: "请选择输入姓名",
          },
        ],
      },
      {
        type: "datetime",
        label: "出生年月",
        model: "fcsny",
        span: 8,
        labelCol: { span: 8 },
        format: "YYYY-MM-DD",
      },
      {
        type: "input",
        label: "性别",
        model: "fsex",
        span: 8,
        labelCol: { span: 8 },
      },
      {
        type: "input",
        label: "邮箱",
        model: "femail",
        span: 8,
        labelCol: { span: 8 },
      },
      {
        type: "input",
        label: "毕业院校",
        model: "fbyyx",
        span: 8,
        labelCol: { span: 8 },
      },
      {
        type: "input",
        label: "从事工作",
        model: "fcsgz",
        span: 8,
        labelCol: { span: 8 },
      },

      {
        type: "input",
        label: "工作单位",
        model: "fgzdw",
        span: 8,
        labelCol: { span: 8 },
      },
      {
        type: "input",
        label: "所在部门",
        model: "fszbm",
        span: 8,
        labelCol: { span: 8 },
      },
      {
        type: "input",
        label: "联系电话",
        model: "fphone",
        span: 8,
        labelCol: { span: 8 },
      },
      {
        type: "input",
        label: "职称",
        model: "fzc",
        span: 8,
        labelCol: { span: 8 },
      },
      {
        type: "input",
        label: "职务",
        model: "fzw",
        span: 8,
        labelCol: { span: 8 },
      },
      {
        type: "input",
        label: "专业",
        model: "fzy",
        span: 8,
        labelCol: { span: 8 },
      },

      {
        type: "input",
        label: "单位电话",
        model: "fdwdh",
        span: 8,
        labelCol: { span: 8 },
      },
      {
        type: "input",
        label: "传真",
        model: "fcz",
        span: 8,
        labelCol: { span: 8 },
      },
      {
        type: "input",
        label: "发表过的文章",
        model: "ffbgdwz",
        span: 8,
        labelCol: { span: 8 },
      },
      {
        type: "input",
        label: "备注",
        model: "fbz",
        span: 8,
        labelCol: { span: 8 },
      },

      // {
      //   type: "input",
      //   label: "入选操作人",
      //   model: "frxczr",
      //   span: 8,
      //   labelCol: { span: 8 },
      // },
      // {
      //   type: "input",
      //   label: "入选理由",
      //   model: "frxly",
      //   span: 8,
      //   labelCol: { span: 8 },
      // },
      // {
      //   type: "input",
      //   label: "入选时间",
      //   model: "frxsj",
      //   span: 8,
      //   labelCol: { span: 8 },
      // },

      // {
      //   type: "input",
      //   label: "是否入选",
      //   model: "fsfrx",
      //   span: 8,
      //   labelCol: { span: 8 },
      // },
    ];
    return {
      newImage:new Image(),
      formItem,
      columns: [
        {
          type: "checkbox",
          width: "60",
        },
        {
          type: "seq",
          title: "序号",
          width: "60",
        },
        {
          field: "fyear",
          title: "年度",
          width: "150",
        },
        {
          field: "fbusmc",
          title: "姓名",
          width: "200",
        },
        {
          field: "fbyyx",
          title: "毕业院校",
          width: "150",
        },
        {
          field: "fzy",
          title: "专业",
          width: "150",
        },
        {
          field: "fgzdw",
          title: "工作单位",
          width: "150",
        },
        {
          field: "fzw",
          title: "职务",
          width: "150",
        },
        {
          field: "frxczr",
          title: "入选操作人",
          width: "150",
        },
        {
          field: "fsfrx",
          title: "是否入选",
          width: "150",
        },
        {
          field: "frxly",
          title: "入选理由",
          width: "150",
        },
        {
          field: "ftjzg",
          title: "推荐资格",
          width: "150",
        },

        {
          title: "操作",
          width: 250,
          field: "operate",
          slots: { default: "operate", fixed: "right" },
          fixed: "right",
        },
      ],
      flag: false,
      queryParams: {},
      config: {},
      data: [],
      allAlign: null,
      formData: {
        fsxmc: "",
        fqymc: "",
        fslsj: "",
        fjzrq: "",
      },
      fromItem: [
        {
          field: "fyear",
          title: "年度",
          type: "input",
          itemRender: {},
          slots: { default: "name_item" },
        },
        {
          field: "fbusmc",
          title: "姓名",
          type: "input",
          itemRender: {},
          slots: { default: "name_item" },
        },
      ],
      page: queryPageList,
      initialize: {},
      form: null,
      vxModalAdd: {
        visabled: false,
        width: "100vw",
        height: "100vh",
        title: "添加",
        content: "",
      },
      model: {},
      appSrc: "",
      appmodel: false,
      addFormData: {},
    };
  },
  created() {},
  mounted() {},

  methods: {
    checkView(row) {
      //console.log(row);
      this.$refs.modal.handler(row.jobid);
    },
    handlerAdd() {
      this.vxModalAdd.visabled = true;
      this.flag = false;
      this.model = {};
    },
    beforeCreateForm(form) {
      this.form = form;
      let fyear = form.getFieldsValue(["fyear"]);
      const obj = {};
      obj["fyear"] = new Date().getFullYear() + "";
      if (!fyear) {
        setTimeout(() => {
          //console.log(obj);
          form.setFieldsValue(obj);
        }, 200);
      }
    },
    handlerAppFormChange(formData) {
      //console.log(formData);
      this.addFormData = formData;
    },
    addOk() {
      if (!this.flag) {
        //添加
        addHcyTj({...this.addFormData,fcsny:moment(this.addFormData.fcsny).format('YYYY-MM-DD')})
          .then((res) => {
            //console.log(res);
            this.$VxeMessage({ content: res.message, status: "success" });
            this.vxModalAdd.visabled = false
            this.$refs.xTable.getQueryList();
          })
          .catch((error) => {
            this.$VxeMessage({ content: res.message, status: "error" });
          });
      } else {
        //编辑
        let formData = Object.assign(this.model, this.addFormData);
        const {gzjlList,...newData} = formData
        spcyRsHcytjjlEdit({...newData,fcsny:moment(this.addFormData.fcsny).format('YYYY-MM-DD')})
          .then((res) => {
            //console.log(res);
            this.$VxeMessage({ content: res.message, status: "success" });
            this.handlerEdit(this.model)
          })
          .catch((error) => {
            // this.$VxeMessage({ content: res.message, status: "error" });
          });
      }
    },
    addClear() {
      this.$refs.xTable.getQueryList();
    },
    // 编辑
    async handlerEdit(row) {
      const res = await spcyRsHcytjjQueryById({ id: row.id });
      if (res.success) {
        this.vxModalAdd.visabled = true;
        this.model = res.result;
        this.flag = true;
      }
    },
    // 删除
    handlerDelete(row) {
      spcyRsHcytjjlDeleteBatch(row.id).then((res) => {
        if (res.success) {
          this.$message.success(res.message);
          this.$refs.xTable.getQueryList();
        } else {
          this.$message.error(res.message);
        }
      });
    },
    // 移动端
    handlerAppForm(row) {
      const src = qrcanvas({
        data:
          bootConfig[process.env.NODE_ENV].EXTERNAL_ACCESS_URL +process.env.BASE_URL
          `recommen`,
        size: 2600,
        background: "#fff",
      });
      this.appSrc = this.newImage.src = src.toDataURL("image/png")
      this.appmodel = true;
    },
    handlerSmForm() {
      const src = qrcanvas({
        data:bootConfig[process.env.NODE_ENV].EXTERNAL_ACCESS_URL+process.env.BASE_URL+'flexform',
        size: 2600,
        background: "#fff",
      });
      this.appSrc = this.newImage.src = src.toDataURL("image/png")
      this.appmodel = true;
    },
  },
};
</script>

<style lang="less" scoped>
// @import "../assets/table.less";
@import url("../assets/table.less");
</style>
